<template>
  <div class="vehicle-distribute-part">
    <router-link :to="routerLink">
      <p class="vehicle-distribute-head">{{ vehDisDasTitle }}</p>
      <div id="vehicle-distribute-echarts"></div>
    </router-link>
  </div>
</template>

<style type="text/css" src="./vehicleDistributionDashboard.css">
</style>

<script>
    import {axiosRequest, ObjToArray, twoArrayDivide} from "@/common/common";
    import {commonConfig} from "@/config/commonConfig";
    import * as echarts from "echarts";
    import vhcleEchartsConfig from "./vhcleEchartsConfig.js";

    export default {
        name: "VehicleDistributionDashboard",
        components: {},
        data() {
            return {
                routerLink: "/Home/VehicleDistribution",
                vehDisDasTitle: "车辆分布",
                getUrl: commonConfig.rootUrl + commonConfig.GetCarOnLine,
                CarOnlineNumberArr: "",
                CarOnlineNumberRate: "",
                VideoNumberArr: "",
                VideoNumberRate: "",
                CarTotalArr: ""
            };
        },
        mounted() {
            this.GetCarOnLine();
        },
        methods: {
            GetCarOnLine() {
                const self = this;
                console.log("GetCarOnLine");

                axiosRequest
                    .axiosGet(this.getUrl)
                    .then(function (response) {
                        self.CarOnlineNumberArr = ObjToArray(response.data.CarOnlineNumber);
                        self.VideoNumberArr = ObjToArray(response.data.VideoNumber);
                        self.CarTotalArr = ObjToArray(response.data.CarTotal);
                        self.CarOnlineNumberRate = twoArrayDivide(
                            self.CarOnlineNumberArr,
                            self.CarTotalArr
                        );
                        self.VideoNumberRate = twoArrayDivide(
                            self.VideoNumberArr,
                            self.CarTotalArr
                        );
                        // console.log("self.VideoNumberArr");
                        // console.log(self.VideoNumberArr);
                        self.drawLine();
                    })
                    .catch(function (error) {
                        // console.log("error");
                        // console.log(error);
                        //         VehicleDistributionDashboard.vue?e841:62 Uncaught (in promise) TypeError: Cannot read property '$message' of undefined
                        // at eval (VehicleDistributionDashboard.vue?e841:62)
                        self.$message({
                            message: error,
                            // type: 'warning'
                            type: "error"
                        });
                    });
            },

            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                // var myChart = echarts.init(
                //   document.getElementById("vehicle-distribute-echarts"),'dark'
                // );

                var myChart = echarts.init(
                    document.getElementById("vehicle-distribute-echarts")
                );


                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: "车辆类型入网概况",
                        subtext: "纯属虚构",
                        x: "center",
                        textStyle: {
                            color: "#fff",
                            fontSize: 15,
                            fontWeight: 300
                        }
                    },
                    tooltip: {
                        trigger: "axis",
                        axisPointer: {
                            type: "cross",
                            crossStyle: {
                                color: "#999"
                            }
                        }
                    },
                    // toolbox 颜色
                    toolbox: {
                        iconStyle: {
                            color: "white",
                            // borderColor: "#6a6da9"
                            borderColor: "#94d6da"
                            // backgroundColor
                        },
                        emphasis: {
                            iconStyle: {
                                // borderColor: "#78a355"
                                // borderColor: "#33a3dc"
                                borderColor: "#94d6da"
                            }
                        },
                        feature: {
                            dataView: {
                                show: true,
                                readOnly: false
                            },
                            magicType: {
                                show: true,
                                type: ["line", "bar"]
                            },
                            restore: {
                                show: true
                            },
                            saveAsImage: {
                                // color:"white",
                                show: true,
                                // backgroundColor:"white"
                                // 保存出来的图片的背景色 不是 图标的
                                // 点击了之后 会跳转 这其实不太好
                                // 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置
                                //  写在这是没有用处的
                                //  color:
                            },
                            // 没有用处
                            // color:
                        },

// 没用 / color:
                        // color:
                    },
                    legend: {
                        x: "center",
                        y: "bottom",
                        data: vhcleEchartsConfig.legendData,
                        textStyle: {
                            color: "#fff" //坐标值得具体的颜色
                        }
                    },
                    color: [
                        "rgb(2,244,245)",
                        "rgb(2,244,245)",
                        "rgb(142,254,245)",
                        "rgb(142,254,245)"
                    ],
                    // dataset: {
                    //   source: [
                    //     ['product','入网车辆数','视频入网数'],
                    //     ['包车客车', 43.3, 85.8],
                    //     ['旅游客车', 83.1, 73.4],
                    //     ['三类班线', 86.4, 65.2],
                    //     ['危险品', 72.4, 53.9]
                    //   ]
                    // },
                    // xAxis: 字体颜色
                    xAxis: {
                        type: "category",
                        data: ["包车客车", "旅游客车", "三类班线", "危险品"],
                        axisPointer: {
                            type: "shadow"
                        },
                        axisLabel: {
                            textStyle: {
                                color: "#fff" //坐标值得具体的颜色
                            }
                        }
                        // 这里是没用的
                        // textStyle:{
                        //     fontSize:15,
                        //     color:'white'
                        // }
                    },
                    // yAxis name  颜色
                    yAxis: [
                        {
                            type: "value",
                            name: "入网总量",

                            // {
                            //  val: '入网总量',
                            //     textStyle: {
                            //           color: '#fff',//坐标值得具体的颜色
                            //       }
                            //  },

                            nameTextStyle: {
                                // 淡蓝色
                                //  color:"#65ABE7",
                                color: "#fff",
                                fontSize: 12
                            },

                            min: 0,
                            max: 20000,
                            interval: 1000,
                            axisLabel: {
                                formatter: "{value} 台",
                                textStyle: {
                                    color: "#fff" //坐标值得具体的颜色
                                }
                            }
                        },
                        {
                            type: "value",
                            name: "入网百分比",
                            nameTextStyle: {
                                color: "#fff",
                                fontSize: 12
                            },
                            min: 0,
                            max: 100,
                            interval: 5,
                            axisLabel: {
                                formatter: "{value} %",
                                textStyle: {
                                    color: "#fff" //坐标值得具体的颜色
                                }
                            }
                        }
                    ],

                    // echarts 保存为图片 图标
                    series: [
                        {
                            name: "入网车辆数",
                            type: "bar",
                            // data: [6685, 12963, 12155, 12954]
                            data: this.CarOnlineNumberArr
                        },
                        {
                            name: "入网车辆率",
                            nameTextStyle: {
                                color: "#fff",
                                fontSize: 12
                            },
                            type: "line",
                            // data: [0.5871 * 100, 0.5745 * 100, 0.2043 * 100, 0.0031 * 100],
                            data: this.CarOnlineNumberRate,
                            yAxisIndex: 1,
                            smooth: true
                        },
                        {
                            name: "视频入网数",
                            type: "bar",
                            data: this.VideoNumberArr
                        },
                        {
                            name: "视频入网率",
                            type: "line",
                            data: this.VideoNumberRate,
                            yAxisIndex: 1,
                            smooth: true
                        }
                    ]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            }
        }
    };
</script>
